<template>
  <div>
    <form class="studentForm">
      <input v-model="formData.id" type="hidden" class="studentIdToEdit" />

      <label for="studentName">Name</label>
      <input v-model="formData.name" type="text" name="name" class="studentName" required />

      <label for="studentGender">Gender</label>
      <select v-model="formData.gender" name="gender" class="studentGender" required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>

      <label for="studentHobbies">Hobbies</label>
      <input
        v-model="formData.hobbies"
        type="text"
        name="hobbies"
        class="studentHobbies"
        required
      />

      <label for="studentEmail">Email</label>
      <input v-model="formData.email" type="email" name="email" class="studentEmail" required />

      <label for="studentPhone">Phone</label>
      <input v-model="formData.phone" type="text" name="phone" class="studentPhone" required />

      <label for="studentAge">Age</label>
      <input v-model="formData.age" type="number" name="age" class="studentAge" required />

      <button @click.prevent="saveStuInfo" type="submit" class="saveStudentBtn">保存信息</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, toValue, watch } from 'vue'

export interface IStudent {
  id: string | number
  name: string
  gender: string
  hobbies: string
  email: string
  phone: string
  age: number | string
  create_at?: string
  update_at?: string
  seleted?: boolean
}

export type PIStudent = Partial<IStudent>//定义了一个名为 PIStudent 的新类型(Partial可选)

const { userInfo } = defineProps<{  //使用 defineProps 函数来定义组件的 props,              
  userInfo: IStudent                //defineProps用于声明组件接收的属性（props）的函数
}>()                                //这里定义了一个名为 userInfo 的 prop，它的类型是 IStudent

const emit = defineEmits<{  //defineEmits 宏创建了一个名为 emit 的变量，它是一个函数，可以用来触发父组件监听的事件。             
  (e: 'save', userInfo: IStudent): void //这部分是一个类型声明，指定了事件的名称 save 和它期望的参数 userInfo 的类型 IStudent。
}>()                       //这个函数的类型被限定为只能触发一个名为 save 的事件，并且这个事件传递的参数 userInfo 必须符合 IStudent 接口的定义。

const formData = ref<PIStudent>(userInfo)

const saveStuInfo = () => {
  console.log(formData.value, 'formData.value')

  emit('save', formData.value as IStudent)
}

/**
 * 设置表单数据
 */
const setFormData = (data: IStudent) => {
  formData.value = data
}

/**
 * 重置表单数据
 */
const resetForm = () => {
  setFormData({
    id: '',
    age: '',
    email: '',
    gender: '',
    hobbies: '',
    name: '',
    phone: ''
  })
}

defineExpose({
  setFormData,
  resetForm
})
</script>

<style lang="scss" scoped>
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input,
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.saveStudentBtn {
  background-color: #4caf50;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  width: 100%;

  &:hover {
    background-color: #45a049;
  }
}
</style>
